<template>
  <div class="rose-pie-container">
    <div ref="chartRef" class="echarts-rose-pie"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import * as echarts from 'echarts'

interface PieData {
  label: string
  value: number
  color: string
}

interface Props {
  title: string
  data: PieData[]
}

const props = defineProps<Props>()

const chartRef = ref<HTMLDivElement>()
let myChart: echarts.ECharts | null = null

// 转换数据格式以匹配ECharts
const chartData = computed(() => {
  return props.data.map(item => ({
    value: item.value,
    name: item.label
  })).sort((a, b) => a.value - b.value)
})

const initChart = () => {
  if (!chartRef.value) return
  
  myChart = echarts.init(chartRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: props.title,
      left: 'center',
      top: 20,
      textStyle: {
        color: '#00d4ff',
        fontSize: 14,
        fontWeight: 600
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00d4ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      }
    },
    visualMap: {
      show: false,
      min: Math.min(...chartData.value.map(d => d.value)),
      max: Math.max(...chartData.value.map(d => d.value)),
      inRange: {
        colorLightness: [0.4, 0.9]
      }
    },
    series: [
      {
        name: props.title,
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: chartData.value,
        roseType: 'radius',
        label: {
          color: 'rgba(255, 255, 255, 0.9)',
          fontSize: 11,
          fontWeight: 'bold',
          formatter: '{b}: {c} ({d}%)'
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          color: function(params: any) {
            // 为每个数据项分配不同颜色
            const colors = [
              '#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', 
              '#eb4d4b', '#6c5ce7', '#a55eea', '#26de81', '#fd79a8'
            ]
            return colors[params.dataIndex % colors.length]
          },
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'rgba(255, 255, 255, 0.8)',
          borderWidth: 2
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 30,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 212, 255, 0.6)',
            borderColor: '#00d4ff',
            borderWidth: 3
          },
          label: {
            fontSize: 12,
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx: number) {
          return Math.random() * 200
        }
      }
    ]
  }
  
  myChart.setOption(option)
  
  // 响应式处理
  const handleResize = () => {
    myChart?.resize()
  }
  window.addEventListener('resize', handleResize)
}

// 监听数据变化
watch(() => props.data, () => {
  if (myChart) {
    initChart()
  }
}, { deep: true })

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
  window.removeEventListener('resize', () => {})
})
</script>

<style scoped>
.rose-pie-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.echarts-rose-pie {
  width: 100%;
  height: 250px;
  min-height: 200px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .echarts-rose-pie {
    height: 200px;
  }
}
</style>
